<template>
<div>
    <h1>个人信息</h1>
    <div>
          <h2>我的</h2>
          <h3><el-avatar :size="size" :src="circleUrl"></el-avatar></h3>
          <p>{{userData.name}}-{{userData.age}}</p>
          <p>state:{{state.circleUrl}}</p>
          <p>mixin-counter:{{count}}<el-button @click="add">++count</el-button></p>
      </div>
</div>
</template>
<script lang="ts" setup>
import {userInfo} from '@/store/user'

import { reactive, toRefs } from 'vue'
import counter from '@/common/mixin'
const {count,add} = counter()
const userData = userInfo()

const state = reactive({
  circleUrl:
    'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  squareUrl:
    'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
  sizeList: ['large', 'default', 'small'],
})
const size = "default"
const { circleUrl, squareUrl, sizeList } = toRefs(state)
</script>
